<template>
  <el-tabs tab-position="left" class="panel-content">
    <el-tab-pane v-for="(lib, libIdx) in comLibs" :key="libIdx" :label="lib.type">
      <template #label>
        <div class="panel-content-item" @click="handleShowLibInfo">
          <span class="panel-content-item-icon" :class="lib.icon"></span>
          <p class="panel-content-item-title p_0 m_0">{{ lib.label }}</p>
        </div>
      </template>
      <transition-group name="list">
        <el-tabs v-if="designLibShow && lib.children.length" tab-position="left" class="sec-panel-content">
          <el-tab-pane v-for="(secLib, secIdx) in lib.children" class="overflow_auto" :key="secIdx"
            :label="secLib.type">
            <template #label>
              <div class="sec-panel-content-item">
                <span class="sec-panel-content-item-icon" :class="secLib.icon"></span>
                <p class="sec-panel-content-item-title p_0 m_0 fontsize_12">
                  {{ secLib.label }}
                </p>
              </div>
            </template>
            <div class="lib-item" v-for="secCom in secLib.comps" :key="secCom.name" :draggable="true"
              @dragstart="handleDragStart($event, secCom)">
              <div class="lib-item-text">{{ secCom.name }}</div>
              <div class="lib-item-img" :style="{ backgroundImage: `url('${secCom.img}')` }"></div>
            </div>
          </el-tab-pane>
        </el-tabs>
        <div v-else-if="designLibShow && !lib.children.length" class="lib-item" v-for="com in lib.comps" :key="com.name"
          :draggable="true" @dragstart="handleDragStart($event, com)">
          <div class="lib-item-text">{{ com.name }}</div>
          <div class="lib-item-img" :style="{ backgroundImage: `url('${com.img}')` }"></div>
        </div>
      </transition-group>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import { comLibs } from "./../../../../utils/dict.js";
import { computed, defineComponent } from "vue";
import { useDesignStore } from "../../../../store/design";

export default defineComponent({
  name: "lib-tabs",
  setup() {
    const designStore = useDesignStore();
    const designLibShow = computed(() => designStore.designLibShow);
    const handleShowLibInfo = () => {
      if (!designLibShow.value) {
        designStore.setDesignLibShow(designLibShow.value);
      }
    };
    const handleDragStart = (e, com) => {
      e.dataTransfer.setData("dragCom", JSON.stringify(com));
    };
    return { comLibs, designLibShow, handleShowLibInfo, handleDragStart };
  },
});
</script>

<style lang="less" scoped>
@import url("./index.less");

.panel-content {
  // #14161a
  :deep(.el-tabs__item) {
    height: 60px;
    width: 50px;
    padding-left: 0;
    padding-right: 0;
    line-height: 60px;
  }

  :deep(.el-tabs__item.is-active) {
    background-color: #14161a;
    color: #fff;
  }

  :deep(.el-tabs__nav-wrap.is-left::after) {
    width: 0;
  }

  :deep(.el-tabs__content),
  :deep(.el-tab-pane) {
    height: 100%;
    background-color: rgb(10, 11, 13);
  }

  .sec-panel-content {
    height: 100%;
    background-color: #0a0b0d;

    :deep(.el-tabs__active-bar) {
      background-color: transparent;
    }

    :deep(.el-tabs__item) {
      height: 60px;
      line-height: 60px;
      padding-left: 4px;
      padding-right: 4px;
    }

    :deep(.el-tabs__nav-scroll) {
      background: #161616;
    }

    :deep(.el-tabs__content) {
      background-color: #111;
    }

    :deep(.el-tabs__item.is-active) {
      background-color: #000000;
      color: #409eff;

      .sec-panel-content-item-icon {
        display: none;
      }

      .sec-panel-content-item-title {
        display: inline-block;
      }
    }

    .sec-panel-content-item {
      width: 40px;
      height: 40px;
      text-align: center;

      .sec-panel-content-item-icon {
        padding-right: 12px;
        padding-left: 12px;
        display: inline-block;
      }

      .sec-panel-content-item-title {
        display: none;
      }

      &:hover {
        .sec-panel-content-item-icon {
          display: none;
        }

        .sec-panel-content-item-title {
          display: inline-block;
        }
      }
    }
  }
}
</style>
